import React from 'react'

import TodoHead from './TodoHead'
import TodoContent from './TodoContent'
import TodoFoot from './TodoFoot'

class Todolist extends React.Component{
    state = {
        datalist: [
            {
                id: 1,
                todo: '赚他一个亿津巴布韦币',
                date: '2022/7/20',
                done: true,
            },
            {
                id: 2,
                todo: '迎娶白富美，达到人生巅峰',
                date: '2022/7/21',
                done: false,
            },
            {
                id: 3,
                todo: '出任CEO，达到疯癫状态',
                date: '2022/7/22',
                done: false,
            },
        ]
    }

    addItem = (todo) =>{
        const newItem = {
            id: Math.ceil(Math.random() * 1000),
            // todo:document.querySelector('#input').value,
            todo,
            date: new Date().toLocaleDateString(),
            done: false
        }

        this.setState({
            datalist: [newItem, ...this.state.datalist]
        })
    }

    // 基于谁的数据谁修改的原则，把修改方法定义在数据所在的组件
    removeItem = (id)=>{

            console.log('点击后执行', id)

            this.setState({
                datalist: this.state.datalist.filter(item => item.id != id)
            })
    }
    completeItem = (id)=>{
        const { datalist } = this.state;

        // 找到相应的数据，并修改done属性
        const newDatalist = datalist.map(item => {
            if (item.id === id) {
                item.done = !item.done;
            }
            return item;
        })
        this.setState({
            datalist: newDatalist
        })
    }
    render(){
        const {datalist} = this.state;
        return (
            <div className='p-5'>
                <TodoHead addItem={this.addItem}></TodoHead>
                <TodoContent datalist={datalist} removeItem={this.removeItem} completeItem={this.completeItem}></TodoContent>
                <TodoFoot datalist={datalist}></TodoFoot>
            </div>
        )
    }
}

export default Todolist;